<template>
  <div class="goodsDetail">
    <DetailTop />
    <van-swipe @change="onChange">
      <van-swipe-item class="product_image"
        ><img :src="goods.list_pic_url" alt="丢了"
      /></van-swipe-item>
      <van-swipe-item class="product_image">2</van-swipe-item>
      <van-swipe-item class="product_image">3</van-swipe-item>
      <van-swipe-item class="product_image">4</van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
    <Tips></Tips>
    <div class="info">
      <h3>{{ goods.name }}</h3>
      <p>慢回弹海绵，时尚设计。</p>
      <div>￥{{ goods.retail_price }}元</div>
    </div>

    <div
      role="button"
      tabindex="0"
      class="showSku van-cell van-cell--clickable"
    >
      <div @click="onAdd" class="van-cell__title">
        <span>选择规格</span>
      </div>
      <i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>

    <div

    v-show="show"
      class="
        van-popup
        van-popup--round
        van-popup--bottom
        van-popup--safe-area-inset-bottom
        van-sku-container
      "
      style="z-index: 2010"
    >
      <div class="van-sku-header van-hairline--bottom">
        <div class="van-image van-sku-header__img-wrap">
          <img
            :src="goods.list_pic_url"
            class="van-image__img"
            style="object-fit: cover"
          />
        </div>
        <div class="van-sku-header__goods-info">
          <div class="van-sku__goods-price">
            <span class="van-sku__price-symbol">￥</span
            ><span class="van-sku__price-num">{{goods.retail_price}}</span>
          </div>
          <div class="van-sku-header-item">
            <span class="van-sku__stock"
              >剩余 <span class="van-sku__stock-num">100</span> 件</span
            >
          </div>
          <div class="van-sku-header-item">请选择</div>
        </div>
      </div>
      <div class="van-sku-body" style="max-height: 560px">
        <div class="van-sku-group-container"></div>
        <div class="van-sku-stepper-stock">
          <div class="van-sku__stepper-title">购买数量</div>
          <div class="van-stepper van-sku__stepper">
            <van-stepper v-model="value" min="1" max="100" />
          </div>
        </div>
        <div class="van-sku-messages"></div>
      </div>
      <div class="van-sku-actions">
        <button class="van-button van-button--warning van-button--large">
          <div class="van-button__content">
            <span class="van-button__text">加入购物车</span>
          </div></button
        ><button class="van-button van-button--danger van-button--large">
          <div class="van-button__content">
            <span class="van-button__text">立即购买</span>
          </div>
        </button>
      </div>
      <i 
      @click="chacha"
        role="button"
        tabindex="0"
        class="
          van-icon van-icon-cross
          van-popup__close-icon van-popup__close-icon--top-right
        "
        ><!----></i
      >
    </div>

    <div class="attribute">
      <h4>商品参数</h4>
      <ul>
        <li>
          <span>规格尺寸</span>
          <section>方形38*38*3cm 圆形 φ38*3cm</section>
        </li>
      </ul>
    </div>

    <div class="issue">
      <div class="line_title">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <ul class="issue_content">
        <li>
          <h3>购买运费如何收取？</h3>
          <p>
            单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。(港澳台地区需满
          </p>
        </li>
        <li>
          <h3>使用什么快递发货？</h3>
          <p>
            严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除外
          </p>
        </li>
        <li>
          <h3>如何申请退货？</h3>
          <p>
            1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，
          </p>
        </li>
        <li>
          <h3>如何开具发票？</h3>
          <p>
            1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以
          </p>
        </li>
      </ul>
    </div>
    <div class="line_title">
      <span></span>
      <h3>大家都在看</h3>
    </div>

    <ul class="kkop">
      <li v-for="list of goodsList[0]" :key="list.id" @click="onGo(list.id)">
        <img
          alt=""
          width="100%"
          style="display: block"
          :data-src="list.list_pic_url"
          :src="list.list_pic_url"
          lazy="loaded"
        />
        <div class="title">{{ list.name }}</div>
        <div class="price">￥{{ list.retail_price }}元</div>
      </li>
    </ul>

    <van-goods-action>
      <van-goods-action-icon
        :icon="ifHave ? 'star' : 'star-o'"
        :text="ifHave ? '已收藏' : '收藏'"
        :color="ifHave ? 'darkred' : '#666'"
        @click="ifHave = !ifHave"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" :badge="carNum" />
      <van-goods-action-button @click="onAdd" type="warning" text="加入购物车" />
      <van-goods-action-button @click="onBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import DetailTop from "../../components/DetailTop.vue";
import Tips from "../../components/Tips.vue";

import { getGoodsList, getGoods ,getCartCount,addCar} from "@/api";
export default {
  name: "GoodsDetail",
  data() {
    return {
      current: 0,
      ifHave: false,
      goodsList: [],
      goods: {},
      show:false,
      value:1,
      carNum:0
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    onAdd(){
      if(this.show){
           if(localStorage.getItem("userToken")) {
             addCar({id:this.$route.params.id,num:this.value,goodsName:this.goods.name,price:this.goods.retail_price ,img:this.goods.list_pic_url}).then((res)=>{
               this.$toast("添加成功");
               this.getCarNum();
             })
          }else{
            this.$toast.loading({
              message: '请先登录...',
              forbidClick: true,
            });
            this.$store.commit("CHANGEISLOGINED",false);
          
              this.$router.push({
              path:'/user'
            })
         
          }
      }else{
      this.show=true;
      }
    },
    chacha(){
      this.show=false
    },
    onGo(id){
       this.$router.push("/goodsDetail/" + id);
    },
    onBuy(){
      if (localStorage.getItem("userToken")) {
          this.$toast("您所在的地区不能购买，包意思");
      }else{
        this.$toast.loading({
          message: '请先登录...',
          forbidClick: true,
        });
        this.$store.commit("CHANGEISLOGINED",false);
        this.$router.push({
          path:'/user'
        })
      }
    },
    getCarNum(){
      getCartCount().then((res=>{
        this.carNum=res.count;
      }))
    },
    goCart(){
      if (localStorage.getItem("userToken")) {
          this.$router.push({
          path:'/cart'
        })
      }else{
        this.$toast.loading({
          message: '请先登录...',
          forbidClick: true,
        });
        this.$store.commit("CHANGEISLOGINED",false);
        this.$router.push({
          path:'/user'
        })
      }
    }
  },
  components: {
    DetailTop,
    Tips,
  },
  created() {
    getGoodsList({
      id: this.$route.params.id,
    }).then((res) => {
      this.goodsList = res;
    }),
      getGoods({
        id: this.$route.params.id,
      }).then((res) => {
        this.goods = res;
      });
      if(localStorage.getItem("userToken")){
        this.getCarNum()
    }
  },
  watch:{
   $route(){
    //  getGoodsList({
    //   id: this.$route.params.id,
    // }).then((res) => {
    //   this.goodsList = res;
    // }),
    //   getGoods({
    //     id: this.$route.params.id,
    //   }).then((res) => {
    //     this.goods = res;
    //   });
     if (to.path == from.path) return;
      this.$router.go(0); // 刷新页面
    },
    
  }
  
};
</script>

<style lang="less" scoped>
.context {
  padding-bottom: 50px;
}
.info {
  background: #fff;
  text-align: center;
  padding: 15px 0;
  h3 {
    font-weight: normal;
    font-size: 0.2rem;
    line-height: 30px;
  }
  p {
    color: #999;
    font-size: 0.14rem;
    line-height: 30px;
  }
  div {
    color: darkred;
    font-size: 0.14rem;
    line-height: 30px;
  }
}

.showSku {
  margin-bottom: 20px;
  border-top: 1px solid #ccc;
}

.attribute {
  background: #fff;
  padding: 5px 2%;
  overflow: hidden;
  h4 {
    font-weight: normal;
    font-size: 0.2rem;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 0.1rem;
  }
  ul {
    padding: 0 0.1rem;
    li {
      background: #efefef;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      span {
        width: 24%;
        color: #999;
        text-align: right;
      }
      section {
        flex: 1;
        padding-left: 0.1rem;
        // 最多显示一行的文字，多余的内容会被省略
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

// 这里要深度修改样式，如果不加/deep/,样式在控制台上看不到，也就是没有给这个div加上样式，或者把style中的scoped去掉，也可加上样式。

/deep/.product_image {
  img {
    width: 100%;
    display: block;
  }
}

.line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: 0.18rem;
  background: #fff;
  span {
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  h3 {
    width: 30%;
    height: 40px;
    font-weight: normal;
    font-size: 0.18rem;
    background: #fff;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

.issue {
  background: #fff;
  .issue_content {
    h3 {
      font-weight: normal;
      height: 40px;
      padding-left: 0.2rem;
      line-height: 40px;
      font-size: 0.16rem;
      position: relative;
      padding-right: 0.1rem;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        background: darkred;
        border-radius: 50%;
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -2px;
      }
    }
    p {
      font-size: 0.14rem;
      padding-left: 0.2rem;
      padding-right: 0.1rem;
      color: #666;
    }
  }
}
.van-goods-action {
  z-index: 9999;
}
.van-sku-container {
  min-height: auto;
}

// 轮播图右下加角标
.custom-indicator {
  position: absolute;
  color: #fff;
  right: 6px;
  bottom: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
}

.kkop {
  background-color: #efefef;
  padding: 0.1rem 2%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 49%;
    background-color: #fff;
    text-align: center;
    line-height: 0.3rem;
    margin-bottom: 0.1rem;
    .title {
      // 最多显示一行的文字，多余的内容会被省略
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      color: darkred;
    }
  }
}
</style>